<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户查询</title>
<link rel="stylesheet" type="text/css" href="default/easyui.css">
<link rel="stylesheet" type="text/css" href="icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#sysuser').datagrid({
			pagination: true,
			pageSize:5,
			singleSelect:true,
			pageList:[5,10,20,40],
			scrollbarSize:0,
		    url:'http://localhost:8080/getByPage',    
		    columns:[[  
		        {field:'id',title:'编号',width:"20%"},    
		        {field:'userName',title:'用户名',width:"20%"},    
		        {field:'passWord',title:'密码',width:"30%",align:'right'},  
		        {field:'role',title:'角色',width:"30%",align:'right',
					formatter: function(value,row,index){
						if (value==1){
							return "管理员";
						} else {
							return "普通用户";
						}
					}
		        }
		    ]]    
		});
		
		$('#sysuser').datagrid("getPager").pagination( {
			"pageSize" : 5,
			pageList:[5,10,20,40],
			displayMsg : '当前数据范围 {from} 到 {to} ，共 {total} 条记录',
			beforePageText : '当前',
			afterPageText : '&nbsp; ,共 {pages}页'
		});
		
	}); 
	function getData(){
		var rowdata = $('#sysuser').datagrid('getSelected');
		if(rowdata){
			alert(rowdata.userName);
		}else{
			alert("请选择");
		}
		

	}
	</script>
</head>
<body>
	<table id="sysuser"></table>
	<a id="btn" href="#" onclick="getData()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">getDate</a>  
</body>
</html>